<template>
	<view class="set">
		<u-navbar title="申请品鉴推介师" :is-back="false" :border-bottom="false"></u-navbar>
		<view class="tips">提示：请如实填写个人信息，资料提交后，会有专人审核，审核通过即可成为品鉴推介师。</view>
		<view class="box">
			<view class="i">
				<view class="l">账号</view>
				<view class="r">
					<input type="text" v-model="form.username" placeholder="请输入账号" />
					<img src="../../static/set.png" alt="" class="img" />
				</view>
			</view>
			<view class="i">
				<view class="l">真实姓名</view>
				<view class="r">
					<input type="text" v-model="form.real_name" placeholder="请输入真实姓名" />
					<img src="../../static/set.png" alt="" class="img" />
				</view>
			</view>
			<view class="i">
				<view class="l">密码</view>
				<view class="r">
					<input type="password" v-model="form.password" placeholder="请输入密码" />
					<img src="../../static/set.png" alt="" class="img" />
				</view>
			</view>
			<view class="i">
				<view class="l">手机号</view>
				<view class="r">
					<input type="text" v-model="form.tel" placeholder="请输入手机号" />
					<img src="../../static/set.png" alt="" class="img" />
				</view>
			</view>
		</view>
		<view class="che">
			<u-checkbox-group>
				<u-checkbox v-model="checked" shape="circle"></u-checkbox>
			</u-checkbox-group>
			<view class="te">
				同意
				<text class="c" @click="agreement(3)">《品鉴推介师服务协议》</text>
			</view>
		</view>
		<view class="bt" @click="submit">提交</view>
	</view>
</template>

<script>
import _ from 'lodash';
import { savepjs } from '../../libs/axios.js';
export default {
	data() {
		return {
			checked: false,
			fwz_id: '',
			ouid: '',
			form: {}
		};
	},
	onLoad(option) {
		this.fwz_id = option.fwz_id;
		this.ouid = option.ouid;
		console.log(option);
	},
	methods: {
		agreement(e) {
			uni.navigateTo({
				url: '/pages/agreement/agreement?id=' + e
			});
		},
		submit: _.debounce(
			async function () {
				if (!this.form.username) {
					uni.showToast({
						title: '请填写账号',
						icon: 'error',
						duration: 2000
					});
					return false;
				}
				if (!this.form.real_name) {
					uni.showToast({
						title: '请填写真实姓名',
						icon: 'error',
						duration: 2000
					});
					return false;
				}
				if (!this.form.password) {
					uni.showToast({
						title: '请填写密码',
						icon: 'error',
						duration: 2000
					});
					return false;
				}
				if (!this.form.tel) {
					uni.showToast({
						title: '请填写手机号',
						icon: 'error',
						duration: 2000
					});
					return false;
				}
				if (!this.checked) {
					uni.showToast({
						title: '请确认服务协议',
						icon: 'error',
						duration: 2000
					});
					return false;
				}

				let info = await savepjs({
					p_uid: this.ouid,
					fwz_id: this.fwz_id,
					username: this.form.username,
					real_name: this.form.real_name,
					password: this.form.password,
					tel: this.form.tel
				});
				uni.showToast({
					title: info.message,
					icon: 'success',
					duration: 2000
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/paymentZTJ/paymentZTJ'
					});
				}, 2000);
			},
			1000,
			{
				leading: true, //在延迟开始前立即调用事件
				trailing: false //在延时结束后不调用,保证事件只被触发一次
			}
		)
	}
};
</script>

<style lang="scss">
.set {
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	.tips {
		opacity: 1;
		background: rgba(254, 241, 239, 1);
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(251, 99, 79, 1);
		padding: 30rpx 40rpx;
	}
	.che {
		margin: 32rpx;
		display: flex;
		text-align: left;
		.c {
			color: rgb(255, 67, 73);
		}
	}
	.box {
		.i {
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);
			.l {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}
			.r {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				.img {
					width: 24rpx;
					height: 24rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
	.bt {
		width: 604rpx;
		height: 84rpx;
		border-radius: 196rpx;
		border: 2rpx solid rgb(255, 67, 73);
		background: rgb(255, 67, 73);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin: 40rpx auto 0 auto;
	}
}
</style>
